<script>
  import HelloWorld from './components/HelloWorld.svelte'
  import ImagePreview from './components/ImagePreview.svelte'
  import ChatImagePreview from './components/ChatImagePreview.svelte'
  import TypeWriter from './components/TypeWriter.svelte'
  import TypeWriterLib from './components/TypeWriterLib.svelte'
  import SecurityQuiz from './components/SecurityQuiz.svelte';
  import CollapsibleQuiz from './components/CollapsibleQuiz.svelte';
  import KnowledgeConfig from './lib/components/KnowledgeConfig.svelte';

  let count = 0
  let showImagePreview = false
  let showChatImagePreview = false
  let showKnowledgeConfig = false;
  
  const sampleImages = [
    { url: 'https://picsum.photos/800/600?random=1', name: 'sample-image-1.jpg' },
    { url: 'https://picsum.photos/800/600?random=2', name: 'sample-image-2.jpg' },
    { url: 'https://picsum.photos/800/600?random=3', name: 'sample-image-3.jpg' },
    { url: 'https://picsum.photos/800/600?random=4', name: 'sample-image-4.jpg' },
    { url: 'https://picsum.photos/800/600?random=5', name: 'sample-image-5.jpg' }
  ]
  
  const chatImages = [
    { url: 'https://picsum.photos/800/600?random=6', name: '智数查数SQL记录.jpg' },
    { url: 'https://picsum.photos/800/600?random=7', name: '智数平台快速入门手册.jpg' },
    { url: '', name: 'Base64-示例图片.svg' },
    { url: 'https://picsum.photos/800/600?random=9', name: '系统架构图.jpg' },
    { url: 'https://picsum.photos/800/600?random=10', name: '用户操作指南.jpg' }
  ]
  
  function increment() {
    count += 1
  }
  
  function openImagePreview() {
    showImagePreview = true
  }
  
  function openChatImagePreview() {
    showChatImagePreview = true
  }
  
  function openKnowledgeConfig() {
    showKnowledgeConfig = true;
  }
  
  function closeKnowledgeConfig() {
    showKnowledgeConfig = false;
  }
  
  function handleImageKeydown(event) {
    if (event.key === 'Enter' || event.key === ' ') {
      event.preventDefault();
      openImagePreview();
    }
  }
</script>

<main>
  <div class="container">
    <h1>欢迎使用 Svelte!</h1>
    
    <div class="nav-section">
      <button class="nav-btn" on:click={openKnowledgeConfig}>
        打开知识库配置
      </button>
    </div>
    
    {#if showKnowledgeConfig}
      <div class="knowledge-section">
        <div class="section-header">
          <button class="close-btn" on:click={closeKnowledgeConfig}>× 关闭</button>
        </div>
        <KnowledgeConfig />
      </div>
    {:else}
      <!-- 原有内容 -->
      <SecurityQuiz />
      
      <!-- 打字机效果演示 -->
      <div class="typewriter-section">
        <h2>打字机效果演示</h2>
        
        <div class="typewriter-demo">
          <h3>基础效果：</h3>
          <TypeWriter text="Hello, World! 这是一个打字机效果。" speed={80} />
        </div>

        <div class="typewriter-demo">
          <h3>慢速效果：</h3>
          <TypeWriter text="慢慢地输入每一个字符..." speed={150} delay={500} />
        </div>

        <div class="typewriter-demo">
          <h3>循环效果：</h3>
          <TypeWriter 
            text="这段文字会不断重复播放！" 
            speed={100} 
            loop={true} 
            pauseTime={1500} 
          />
        </div>

        <div class="typewriter-demo">
          <h3>自定义光标：</h3>
          <TypeWriter 
            text="使用下划线作为光标" 
            speed={90} 
            cursorChar="_" 
            delay={1000}
          />
        </div>

        <div class="typewriter-demo">
          <h3>无光标效果：</h3>
          <TypeWriter 
            text="这个没有光标闪烁效果" 
            speed={70} 
            cursor={false} 
            delay={1500}
          />
        </div>

        <div class="typewriter-demo">
          <h3>多行文本：</h3>
          <TypeWriter 
            text="第一行文字
第二行文字
第三行文字" 
            speed={60} 
            delay={2000}
          />
        </div>
      </div>
      
      <!-- 第三方库打字机效果演示 -->
      <div class="typewriter-section">
        <h2>第三方库打字机效果</h2>
        
        <div class="typewriter-demo">
          <h3>多字符串循环：</h3>
          <TypeWriterLib 
            strings={["欢迎来到 Svelte!", "这是打字机效果", "支持多种动画", "功能非常强大!"]} 
            speed={75}
            deleteSpeed={50}
            delay={2000}
          />
        </div>

        <div class="typewriter-demo">
          <h3>单次播放：</h3>
          <TypeWriterLib 
            strings={["这段文字只播放一次，不会循环"]} 
            speed={60}
            loop={false}
          />
        </div>

        <div class="typewriter-demo">
          <h3>快速模式：</h3>
          <TypeWriterLib 
            strings={["快速打字", "删除也很快", "节奏紧凑"]} 
            speed={30}
            deleteSpeed={20}
            delay={800}
          />
        </div>
      </div>
      
      <HelloWorld />
      
      <div class="counter">
        <button on:click={increment}>
          点击次数: {count}
        </button>
      </div>
      
      <div class="image-gallery-section">
        <h2>图片预览组件演示</h2>
        <div class="preview-buttons">
          <button class="preview-btn" on:click={openImagePreview}>
            原始图片预览
          </button>
          <button class="preview-btn chat-btn" on:click={openChatImagePreview}>
            聊天图片预览
          </button>
        </div>
        
        <div class="sample-images">
          {#each sampleImages as image, index}
            <div 
              class="sample-image" 
              role="button"
              tabindex="0"
              on:click={openImagePreview}
              on:keydown={handleImageKeydown}
              aria-label="查看图片 {image.name || `图片 ${index + 1}`}"
            >
              <img src={image.url} alt={image.name} />
            </div>
          {/each}
        </div>
      </div>

      <CollapsibleQuiz title="网络安全试题">
        <div class="question">
          1. 以下哪种行为可能导致大数据中心遭受 SQL 注入攻击？（单选题）
        </div>
        
        <div class="options">
          <div class="option">A. 定期更新数据库系统</div>
          <div class="option">B. 对用户输入进行严格校验</div>
          <div class="option">C. 使用硬编码的 SQL 语句</div>
          <div class="option">D. 限制数据库用户权限</div>
        </div>
        <div class="options">
          <div class="option">A. 定期更新数据库系统</div>
          <div class="option">B. 对用户输入进行严格校验</div>
          <div class="option">C. 使用硬编码的 SQL 语句</div>
          <div class="option">D. 限制数据库用户权限</div>
        </div> <div class="options">
          <div class="option">A. 定期更新数据库系统</div>
          <div class="option">B. 对用户输入进行严格校验</div>
          <div class="option">C. 使用硬编码的 SQL 语句</div>
          <div class="option">D. 限制数据库用户权限</div>
        </div> <div class="options">
          <div class="option">A. 定期更新数据库系统</div>
          <div class="option">B. 对用户输入进行严格校验</div>
          <div class="option">C. 使用硬编码的 SQL 语句</div>
          <div class="option">D. 限制数据库用户权限</div>
        </div>
        <div class="answer">
          <div class="correct-answer">【正确答案】C</div>
          <div class="explanation">
            【答案解析】使用硬编码 SQL 语句，若未对用户输入过滤，易被注入恶意 SQL 代码；定期更新、严格校验输入、限制用户权限可防范攻击。
          </div>
        </div>
      </CollapsibleQuiz>
    {/if}
  </div>
</main>

<ImagePreview 
  images={sampleImages} 
  bind:visible={showImagePreview}
/>

<ChatImagePreview 
  images={chatImages} 
  bind:visible={showChatImagePreview}
/>

<style>
  .container {
    text-align: center;
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  h1 {
    color: #ff3e00;
    font-size: 2.5rem;
    margin-bottom: 2rem;
  }
  
  .counter {
    margin: 2rem 0;
  }
  
  button {
    background-color: #ff3e00;
    color: white;
    border: none;
    padding: 12px 24px;
    font-size: 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
  }
  
  button:hover {
    background-color: #d32f00;
  }
  
  .image-gallery-section {
    margin-top: 3rem;
    padding: 2rem;
    background: #f8f9fa;
    border-radius: 12px;
  }
  
  .image-gallery-section h2 {
    color: #333;
    margin-bottom: 1rem;
  }
  
  .preview-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 2rem;
  }
  
  .preview-btn {
    background-color: #3b82f6;
    margin-bottom: 2rem;
  }
  
  .preview-btn:hover {
    background-color: #2563eb;
  }
  
  .chat-btn {
    background-color: #10b981;
  }
  
  .chat-btn:hover {
    background-color: #059669;
  }
  
  .sample-images {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    max-width: 800px;
    margin: 0 auto;
  }
  
  .sample-image {
    aspect-ratio: 4/3;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .sample-image:hover,
  .sample-image:focus {
    transform: scale(1.05);
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
  }
  
  .sample-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .typewriter-section {
    margin: 3rem 0;
    padding: 2rem;
    background: #f8f9fa;
    border-radius: 12px;
  }
  
  .typewriter-section h2 {
    color: #333;
    margin-bottom: 1.5rem;
    text-align: center;
  }
  
  .typewriter-demo {
    margin: 1.5rem 0;
    padding: 1rem;
    background: white;
    border-radius: 8px;
    border-left: 4px solid #3b82f6;
  }
  
  .typewriter-demo h3 {
    color: #374151;
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }
  
  .typewriter-demo :global(.typewriter) {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #1f2937;
  }
  
  main {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
  }
  
  .nav-section {
    margin: 2rem 0;
  }
  
  .nav-btn {
    background-color: #10b981;
    color: white;
    border: none;
    padding: 12px 24px;
    font-size: 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
  }
  
  .nav-btn:hover {
    background-color: #059669;
  }
  
  .knowledge-section {
    margin: 2rem 0;
    position: relative;
  }
  
  .section-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
  }
  
  .close-btn {
    background-color: #ef4444;
    color: white;
    border: none;
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
  }
  
  .close-btn:hover {
    background-color: #dc2626;
  }
</style>
